<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" media="all" type="text/css" href="style/style-demo.css">

    <script src="script/jquery-1.11.1.js"></script>
    <script src="script/jquery.easing-1.3.js"></script>
    <script src="script/jquery.mousewheel-3.1.12.js"></script>
    <script src="script/jquery.jcarousellite.js"></script>
</head>
<body>

<div id="jcl-demo">


    <!-- Demo 20 --><-- Last Demo -->
    <h4 id="demo20">Mouse wheel and Navigation buttons together.</h4><hr>

    <p>
        This demo is to show that you can use both mouse wheel and navigation buttons both for the same carousel.
        Try scrolling your mouse wheel or clicking on the next and previous buttons<br>
        Note: You need the <a href="https://github.com/brandonaaron/jquery-mousewheel" target="_blank">Mouse Wheel</a> plugin for this to work.
    </p>

    <div class="custom-container mouseWheelButtons">
        <a href="#" class="prev">&lsaquo;</a>
        <div class="carousel">
            <ul>
                <li><img src="image/1.jpg"></li>
                <li><img src="image/2.jpg"></li>
                <li><img src="image/3.jpg"></li>
                <li><img src="image/4.jpg"></li>
                <li><img src="image/5.jpg"></li>
                <li><img src="image/6.jpg"></li>
                <li><img src="image/7.jpg"></li>
                <li><img src="image/8.jpg"></li>
                <li><img src="image/9.jpg"></li>
                <li><img src="image/10.jpg"></li>
                <li><img src="image/11.jpg"></li>
            </ul>
        </div>
        <a href="#" class="next">&rsaquo;</a>
        <div class="clear"></div>
    </div>

<pre class="prettyprint">
$(".mouseWheelButtons .carousel").jCarouselLite({
    btnNext: ".mouseWheelButtons .next",
    btnPrev: ".mouseWheelButtons .prev",
    mouseWheel: true
});
</pre>

    <script type="text/javascript">
        $(".mouseWheelButtons .carousel").jCarouselLite({
            btnNext: ".mouseWheelButtons .next",
            btnPrev: ".mouseWheelButtons .prev",
            mouseWheel: true
        });
    </script>


</div>
</body>
</html>